<template>
  <div>
    <el-dialog :visible.sync="addAddition" title="添加杂项" width="40%" center top="50px">
      <div style="height: 500px;overflow-y: scroll">
        <div class="addition" v-for="(e, i) in addition" :key="e.id + i">
          <div class="name">{{ e.productName }}</div>
          <el-input-number v-model="e.count" :min="0" :max="100000"></el-input-number>
        </div>
      </div>
      <span slot="footer">
          <el-button @click="addAddition=false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">提 交</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="checkAddition" title="查看杂项详情" width="60%" center>
      <el-table :data="detailData" border
                height="calc(100vh - 250px)"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
          fontSize: '12px'
        }">
        <el-table-column prop="id" label="产品ID"></el-table-column>
        <el-table-column prop="productCode" label="产品编码"></el-table-column>
        <el-table-column prop="productName" label="产品名称"></el-table-column>
        <el-table-column prop="norms" label="规格"></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
        <el-table-column prop="colour" label="颜色"></el-table-column>
        <el-table-column prop="count" label="数量"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "additionOrder",
  data() {
    return {
      addAddition: false,
      checkAddition: false,
      addition: [],
      detailData: [],
      additionId: '',
    }
  },
  methods: {
    _add(row) {
      this.additionId = row.id
      this.addition=[]
      this.addAddition = true
      this.$api["orderAdditionList"]({orderId: row.id}).then((res) => {
        const dataArr = [];
        res.map(el => {
          if (el.productCode == 'SCB-TZ' || el.productCode == 'SCB-3' || el.productCode == 'UXKK') {
          } else {
            dataArr.push(el)
          }
        })
        this.addition = (dataArr || []).map((e) => {
          return e;
        });
      });
    },
    _check(row) {
      this.checkAddition = true
      const params = {
        pageNumber: 1,
        pageSize: 20,
        orderId: row.id,
        saleId: row.id
      }
      this.$api.orderOrderAdditionDetail(params).then(res => {
        this.detailData = res
      })
    },
    onConfirm() {
      const additions = this.addition
          .filter((e) => e.count)
          .map((e) => {
            return {
              id: e.id,
              count: e.count,
            };
          });
      const data = {
        additions: additions,
        id: this.additionId,
      }
      this.$api["orderInsertAddition"](data).then(res => {
            this.$message.success('提交成功！')
            this.addAddition = false
            this.$emit("addStatus", 1)
          }
      )
    },
  }
}
</script>

<style scoped lang="less">
/deep/ .el-dialog__header {
  background-color: #0f79e2;
  //border-top-left-radius: 20px;
  //border-top-right-radius: 20px;
}

/deep/ .el-dialog__title {
  color: #fff;
}

.addition {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0;

  .name {
    width: 250px;
    padding-right: 20px;
  }
}
</style>